<template>
  <div class="div_body">
    <div class="noval_name">柯南：拒绝刑事组的男人>>{{ titleName }}</div>
    <div class="left_set">
      <div
        class="item_choose"
        v-for="(item, index) in ChooseIcons"
        :key="item.name"
        @click="ChooseIcon(index)"
      >
        <i :class="item.icon" style="font-size: 30px; margin-bottom: 3px"></i>
        <span>{{ item.name }}</span>
      </div>
      <fontSize @changeFontSize="changeFontSize" ref="fontSize"></fontSize>
      <backgroundColor
        @changeBackGround="changeBackGround"
        ref="background"
      ></backgroundColor>
    </div>
    <div class="noval_body">
      <div v-show="chooseIndex == '0'" class="capater">
        <div class="capaterTitle">
          <span>目录</span>
          <span style="font-size: 15px; cursor: pointer" @click="closeCapter"
            >X</span
          >
        </div>
        <el-col
          :span="12"
          @click.native="getNovel(item)"
          v-for="item in capterList"
          :key="item.titleName"
          style="
            border-bottom: 1px dotted rgb(242, 238, 234);
            margin-bottom: 1rem;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
          :class="item.titleName == titleName ? 'chooseCapater' : 'willCapater'"
          >{{ item.titleName }}</el-col
        >
      </div>
      <div
        v-html="content"
        style="white-space: pre-wrap; text-indent: 2em"
        class="Novelcontent"
        v-show="Number(chooseIndex) > 2"
      ></div>
    </div>
  </div>
</template>

<script>
import {
  getNovelData,
  getNovelCapater,
  getLastReadCapater,
} from "../../api/menu";
import fontSize from "./modules/fontSize.vue";
import backgroundColor from "./modules/backgroundColor.vue";
export default {
  data() {
    return {
      ChooseIcons: [
        { name: "目录", icon: "el-icon-s-fold" },
        { name: "字号", icon: "el-icon-setting" },
        { name: "背景", icon: "el-icon-s-open" },
      ],
      content: "",
      chooseIndex: 3,
      titleName: "",
      capterList: [],
    };
  },

  components: { fontSize, backgroundColor },

  computed: {},

  mounted() {
    this.getLastCapater();
    this.getCapater();
  },

  methods: {
    ChooseIcon(index) {
      if (index == 0) {
        if (this.chooseIndex == 3) {
          this.chooseIndex = 0;
        } else {
          this.chooseIndex = 3;
        }
        this.$refs.fontSize.close();
        this.$refs.background.close();
      } else if (index == 1) {
        this.$refs.fontSize.open();
        this.$refs.background.close();
        this.chooseIndex = 3;
      } else if (index == 2) {
        this.$refs.background.open();
        this.$refs.fontSize.close();
        this.chooseIndex = 3;
      }
    },
    async getLastCapater() {
      let res = await getLastReadCapater(1);
      this.content = JSON.parse(res.data[0].content).replace(/\\n/g, "<br/>");
      this.titleName = res.data[0].titleName;
    },
    //获取目录
    async getCapater() {
      let res = await getNovelCapater();
      this.capterList = res.data;
    },
    // 获取目录对应的页面
    async getNovel(item) {
      let res = await getNovelData(item.titleLink);
      this.content = JSON.parse(res.data[0].content).replace(/\\n/g, "<br/>");
      this.titleName = res.data[0].titleName;
      this.chooseIndex = 3;
    },
    // 关闭目录
    closeCapter() {
      this.chooseIndex = 3;
    },
    //修改字号
    changeFontSize(val) {
      document.getElementsByClassName("Novelcontent")[0].style.fontSize =
        String(val) + "px";
    },
    changeBackGround(val) {
      document.getElementsByClassName("Novelcontent")[0].style.backgroundColor =
        val;
    },
  },
};
</script>
<style lang='scss' scoped>
.div_body {
  width: 45%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  .noval_name {
    width: 100%;
    height: 1rem;
    font-size: 13px;
    letter-spacing: 2px;
    font-family: "Times New Roman", Times, serif;
  }
  .noval_body {
    width: 100%;
    height: calc(100% - 1rem);
    .capater {
      width: 100%;
      height: 100%;
      background: rgb(255, 241, 247);
      overflow-y: auto;
      padding: 1rem 1rem;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0px;
      }
      .capaterTitle {
        width: 100%;
        height: 3rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 25px;
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
      }
    }
    .Novelcontent {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 1rem;
      box-sizing: border-box;
      letter-spacing: 1.5px;
      font-size: 15px;
      background: rgb(233, 214, 192);

      &::-webkit-scrollbar {
        width: 0px;
      }
    }
  }
  .left_set {
    position: absolute;
    top: 5%;
    left: -12%;
    width: 9%;
    height: 50%;
    // border: 1px solid red;
    .item_choose {
      width: 100%;
      height: 4.4rem;
      background: rgba(124, 138, 147, 0.5);
      border-radius: 5px;
      margin-bottom: 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      // color: rgba(255, 255, 255, 0.6);
    }
  }
  .chooseCapater {
    color: red !important;
  }
  .willCapater {
    color: black;
  }
}
</style>